<template>
	<view class="creator">
		<view style="display: flex;justify-content: flex-start;align-items: center;margin-top: 25rpx;">
			<u-icon name="star-fill" size="22" color="#f26d0b"></u-icon>
			<text>收藏列表</text>
		</view>
		<view class="information" v-for="(item, index) in creatorList" :key="index">
			<image :src="`/static/${item.img}`" @click="goAuthor()" mode="aspectFill" class="information-img"></image>
			<view class="text-content">
				<!-- #ifdef H5 -->
				  <view class="text-con" style="display: flex;">
				  	<text class="name">{{item.name}}</text>
				  	<u-icon class="ses-icon" color="#fff"
				  		:class="{'icon-man': item.sex === 'man', 'icon-woman': item.sex === 'woman'}" 
						:name="item.sex"
				  		size="13"></u-icon>
				  </view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				  <view  style="display: flex;align-items: center;justify-content:space-between;">
					  <text class="name">{{item.name}}</text>
					  <view
					  style="width: 23rpx;height: 23rpx;"
					  :class="{'icon-man': item.sex === 'man', 'icon-woman': item.sex === 'woman'}" 
					 >
					  	<u-icon class="ses-icon" color="#fff" :name="item.sex" size="13"></u-icon>
					  </view>
				  </view>
				<!-- #endif -->
				<text class="gq">{{item.gq}}</text>
			</view>
			<view class="icons" @click="unfavorite()">
				<text>取消收藏</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				creatorList: [{
					name: '牢大',
					gq: "开心每一天",
					img: 'kbblnt.jpg',
					sex: 'man',
				}, {
					name: '沈月',
					gq: "开心每一天",
					img: 'sy.jpg',
					sex: 'woman',
				}, ]
			}
		},
		methods: {
			goAuthor() {

			},
			unfavorite() {

			}
		},
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.creator {
		width: 90%;
		margin: auto;
	}

	.information {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 89.5%;
		padding: 38rpx;
		border-radius: 36rpx;
		margin-top: 40rpx;
		background-color: #fff;
	}

	/* #ifdef H5 */
	.information {
		width: 97%;
	}

	/* #endif */
	.information-img {
		width: 125rpx;
		height: 125rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.text-content {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		align-items: start;
		margin-left: 20rpx;
	}

	/* #ifdef MP-WEIXIN */
	.icon-man .u-icon__icon::after {
		background-color: #007bff;
		border-radius: 50%;
		margin: 20rpx 0;
		/* 男性背景颜色 */
	}
	.icon-woman .u-icon__icon::after {
		background-color: #e83e8c ;
		border-radius: 50%;
		margin: 20rpx 0;
		/* 女性背景颜色 */
	}
	.icon-man,.icon-woman{
		border-radius: 50%;
	}
	/* #endif */
	.name {
		margin-right: 10rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.ses-icon {
		background-color: #5500ff;
		border-radius: 50%;
		margin: 20rpx;
		display: inline-block;
	}

	.gq {
		font-size: 28rpx;
		color: #666;
	}


	.icons {
		width: 175rpx;
		background-color: #fff1e8;
		border-radius: 30rpx;
		text-align: center;
		font-size: 24rpx;
		height: 53rpx;
		line-height: 53rpx;
		color: #ea8a19;
		font-weight: 600;
	}

	.icon-man {
		background-color: #007bff;
		/* 男性背景颜色 */
	}

	.icon-woman {
		background-color: #e83e8c;
		/* 女性背景颜色 */
	}
</style>